<template>
  <div>
    <!-- 顶部的部分 -->
    <div id="samplesFixed" :class="{'samples-fixed' : isFixed}">
      <el-row class="samples-info-box insert-page">
        <el-col :span="15">
          <h2>合同详情</h2>
        </el-col>
        <!-- 右半边按钮区域 -->
        <el-col :span="9" class="samples-text-right">
          <el-button v-show="detail.statusName != '已作废'" size="mini" plain type="primary" @click="gotoEdit">编 辑</el-button>

          <el-popover
            v-show="detail.statusName == '草稿'"
            placement="left"
            trigger="click"
            popper-class="s-popover"
            width="234"
          >
            <div style="display:flex;align-items:center;justify-content:center;padding:20px 0;">
              <i
                class="el-icon-question"
                style="font-size:26px;margin-right:10px;color:#e05e5e"
              />
              确定删除这条数据吗？
            </div>
            <div style="text-align: center; margin: 0">
              <el-button
                size="small"
                type="primary"
                plain
                @click="handleClosePopover"
              >
                取 消
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="deletas"
              >
                确 认
              </el-button>
            </div>
            <el-button slot="reference" size="mini" class="button-delete" style="margin-left: 10px;">删 除</el-button>
          </el-popover>
          <el-button v-show="detail.statusName == '执行中'" size="mini" class="button-delete" style="margin-left: 10px;" @click="invalid">作 废</el-button>

          <el-popover
            v-show="detail.statusName == '执行中'"
            placement="left"
            trigger="click"
            popper-class="s-popover"
            width="234"
          >
            <div style="display:flex;align-items:center;justify-content:center;padding:20px 0;">
              <i
                class="el-icon-question"
                style="font-size:26px;margin-right:10px;color:#e05e5e"
              />
              确定完成这条数据吗？
            </div>
            <div style="text-align: center; margin: 0">
              <el-button
                size="small"
                type="primary"
                plain
                @click="handleClosePopover"
              >
                取 消
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="complete"
              >
                确 认
              </el-button>
            </div>
            <el-button slot="reference" size="mini" type="primary" style="margin-left: 10px;">完 成</el-button>
          </el-popover>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-form ref="ruleForm" :model="ruleForm" class="samples-form" :rules="rules" label-width="140px">
        <div class="samples-info-box samples-pageForm">
          <span class="title">基本信息</span>
          <el-row class="samples-dialog-form" style="padding-top: 10px;">
            <el-row class="detail_content">
              <el-col class="detail-wrap" style="margin-bottom: 0;">
                <div class="detail-wrap-lable contractMag-lable" style="text-align: left;padding-left: 72px;;color: #ceab70;">{{ detail.name }}</div>
              </el-col>
            </el-row>
          </el-row>
          <el-row class="samples-dialog-form" style="padding-top: 0;">
            <el-row class="detail_content">
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">合同状态：</div>
                <div>{{ detail.statusName }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">合同编码：</div>
                <div>{{ detail.code }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">甲方单位：</div>
                <div>{{ detail.partyAName }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">乙方单位：</div>
                <div>{{ detail.partyBName }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">业务单元：</div>
                <div>{{ detail.businessUnitName }}</div>
              </el-col>
              <el-col v-if="detail.classifyName=='项目合同'" class="detail-wrap">
                <div class="detail-wrap-lable">所属项目：</div>
                <div>{{ detail.projectName }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">签订日期：</div>
                <div>{{ detail.signedTime }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">合同金额：</div>
                <div>{{ detail.amount }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">币种：</div>
                <div>人民币</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">金额大写：</div>
                <div>{{ detail.bigAmount }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">合同分类：</div>
                <div>{{ detail.classifyName }}</div>
              </el-col>
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">合同类型：</div>
                <div>{{ detail.typeName }}</div>
              </el-col>
            </el-row>

            <el-row class="detail_content" style="margin-top: 0;">
              <el-col class="detail-wrap">
                <div class="detail-wrap-lable">合同内容：</div>
                <div style="width: 99%;">{{ detail.content }}</div>
              </el-col>
            </el-row>
          </el-row>
        </div>

        <div class="samples-info-box samples-pageForm">
          <el-row style="margin-bottom: 15px;">
            <el-col :span="15">
              <span class="title">合同信息</span>
            </el-col>
          </el-row>
          <el-row class="samples-dialog-form">
            <el-table
              :data="contractTable"
              style="width: 100%"
            >
              <el-table-column prop="code" label="合同编号" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>
                    <a
                      style="display: block; color: #ceab70;text-decoration-line: underline;"
                      class="samples-table-overflow"
                      @click="toRouter('code',scope)"
                    >
                      {{ scope.row.code }}
                    </a>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="合同名称" width="180" show-overflow-tooltip />
              <el-table-column prop="partyAName" label="甲方单位" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>
                    <div>{{ scope.row.partyAName }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="partyBName" label="乙方单位" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>
                    <div>{{ scope.row.partyBName }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="金额" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ (Number(scope.row.amount).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,') }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="signedTime" label="签订日期" width="180" show-overflow-tooltip />
              <el-table-column prop="typeName" label="合同类型" width="180" show-overflow-tooltip />
            </el-table>
          </el-row>
          <el-pagination
            class="s-table-pagination"
            style="margin-top:10px;text-align: right"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="materialTableQuery.pageSize"

            layout="total, sizes, prev, pager, next, jumper"
            :total="contractTableQuery.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <div v-if="Lists.length>0 || detail.statusName == '已作废'" class="samples-info-box  samples-pageForm" style="margin-bottom: 10px;">
          <span class="title">附件信息</span>
          <div class="tab-upload-box" style="margin-top: 15px;">
            <el-tabs class="samples-tabs">
              <el-tab-pane v-for="(item , index) in Lists" :key="index">
                <div slot="label" class="tabs-lable">
                  <span>{{ item.name }}</span>
                  <span>({{ fileList[index]?fileList[index].length:0 }})</span>
                </div>
                <upload
                  :action="action"
                  :multiple="false"
                  :file-list="fileList[index]"
                  :editable="editable"
                  @removeList="(i)=>{return spliceList(i,index)}"
                  @changeFile="files=>{return changeFileHandler(files,index)}"
                />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div v-show="detail.typeName != &quot;分包合同&quot; && detail.typeName != &quot;委托合同&quot;" class="samples-info-box samples-pageForm">
          <el-row style="margin-bottom: 15px;">
            <el-col :span="15">
              <span class="title">物料信息</span>
            </el-col>
          </el-row>
          <el-row class="samples-dialog-form">
            <el-table
              :data="materielTable.data"
              class="contract-materiel"
              style="width: 100%"
            >
              <el-table-column prop="name" label="物料名称" fixed="left" show-overflow-tooltip />
              <el-table-column prop="specification" label="规格" show-overflow-tooltip />
              <el-table-column prop="brand" label="品牌" show-overflow-tooltip />
              <el-table-column prop="unitName" label="物料单位" show-overflow-tooltip />

              <el-table-column prop="price" label="物料单价" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.price?(Number(scope.row.price).toFixed(4) + '').replace(/(\d)(?=(\d{3})+\.)/g, '$1,'):0 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="物料数量" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.number ? (Number(scope.row.number).toFixed(4) + '').replace(/(\d)(?=(\d{3})+\.)/g, '$1,') :0 }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="total" label="物料总价" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.total?(Number(scope.row.total).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'):0 }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="totalPriceRow">
              合计金额：{{ detail.materialAmount }}
            </div>
            <el-pagination
              class="s-table-pagination"
              style="margin-top:10px;text-align: right"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="materialTableQuery.pageSize"

              layout="total, sizes, prev, pager, next, jumper"
              :total="materialTableQuery.total"
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
            />
          </el-row>
          <!-- :current-page="handleCurrentChange" -->
        </div>
        <div v-show="detail.statusName != '草稿'" class="samples-info-box samples-pageForm">
          <el-row style="margin-bottom: 15px;">
            <el-col :span="15">
              <span class="title">合同记录</span>
            </el-col>
          </el-row>

          <el-row class="samples-dialog-form">
            <el-table
              :data="contractLogTable"
              style="width: 100%"
            >
              <el-table-column prop="typeName" label="类型" width="250" show-overflow-tooltip />
              <el-table-column prop="updateUserName" label="操作人" show-overflow-tooltip />
              <el-table-column prop="updateTime" label="操作时间" width="250" show-overflow-tooltip />
              <el-table-column prop="remark" label="备注" show-overflow-tooltip />
            </el-table>
          </el-row>
        </div>
      </el-form>
    </el-row>

    <el-dialog
      title="合同作废"
      :visible.sync="invalidVisible"
      width="960px"
      top="50vh"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      custom-class="samples-dialog"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <!-- esc按钮和点击遮罩不会关闭弹窗，需要设置配置项 -->
      <el-row class="samples-dialog-box contract-invalid">
        <el-form ref="validRuleForm" :model="validRuleForm" class="samples-form" :rules="rules" label-width="84px">
          <el-row>
            <el-col :lg="24" :xl="{span: 22, offset: 1,pull:1}">
              <el-form-item label="作废理由：" prop="voidReason">
                <el-input v-model="validRuleForm.voidReason" clearable type="textarea" maxlength="500" resize="none" size="small" :autosize="{ minRows: 4, maxRows: 10}" placeholder="请输入作废理由" />
                <template slot="error" slot-scope="scope">
                  <div class="sample-error-message">{{ scope.error }}</div>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>

      <div class="samples-info-box  samples-pageForm" style="margin-bottom: 10px;">
        <div class="tab-upload-box">
          <el-tabs class="samples-tabs">
            <el-tab-pane v-for="(item , index) in invalidLists" :key="index">
              <div slot="label" class="tabs-lable">
                <span>{{ item.name }}</span>
                <span>({{ invalidFileList[index]?invalidFileList[index].length:0 }})</span>
              </div>
              <upload
                :multiple="false"
                :action="action"
                :file-list="invalidFileList[index]"
                @removeList="(i)=>{return invalidSpliceList(i,index)}"
                @changeFile="files=>{return invalidChangeFileHandler(files,index)}"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-row class="samples-dialog-footer samples-mt-20">
        <el-row class="samples-float-right">
          <el-button size="small" type="primary" plain @click="handleClose">取 消</el-button>
          <el-button size="small" type="primary" @click="premitChooseContract">作 废</el-button>
        </el-row>
      </el-row>
    </el-dialog>
    <div class="artical-footer">
      <div v-show="detail.createUserName" class="footer-pie">
        <div>创建人：</div>
        <div>{{ detail.createUserName }}</div>
      </div>
      <div v-show="detail.createTime" class="footer-pie">
        <div>创建时间：</div>
        <div>{{ detail.createTime }}</div>
      </div>
      <div v-show="detail.updateUserName" class="footer-pie">
        <div>修改人：</div>
        <div>{{ detail.updateUserName }}</div>
      </div>
      <div v-show="detail.updateTime" class="footer-pie">
        <div>修改时间：</div>
        <div>{{ detail.updateTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import sTable from '@/components/STable/s-table'
import {
  insertApi,
  queryUnit,
  selectContractApi,
  selectContractTableApi,
  selectMaterialTableApi,
  deleteApi,
  detailApi,
  editApi,
  materialApi,
  getListApi,
  searchJiaYiApi,
  getContractStatusApi,
  operateApi,
  contractMagDictApi,
  getFileTagsApi
} from '@/api/contractManage/contractMag'
import upload from '@/components/Supload/upload'
import { cacheMixin } from '@/utils/mixins/clearCache'
import { fixedMixin } from '@/utils/mixins/fixedHeaderMixin'
import * as rulejs from '@/utils/rules'
var reg = /((^[1-9]\d*)|^0)(\.\d{0,4}){0,1}$/

export default {
  components: {
    upload,
    sTable
  },
  mixins: [cacheMixin, fixedMixin],
  data() {
    return {
      isFixed: false,
      editable: 0,
      validRuleForm: {
        voidReason: '',
        typeFlag: 30,
        attachmentList: []
      },
      invalidVisible: false,
      contractTableQuery: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      materialTableQuery: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      detail: {},
      fileList: [],
      invalidFileList: [],
      totalPrice: 0,
      Lists: [],
      invalidLists: [{ id: 99, name: '作废附件' }],
      materielNameList: [],
      contractTable: [],
      contractRecordingTable: [],

      materielTableVis: false,
      materielTable: {
        data: [
          // {
          //     name:'',
          //     specification:'',
          //     brand:'',
          //     unitName:'',
          //     price:'',
          //     number:'',
          //     total:''
          // }
        ]

      },
      unitList: [],
      classifyNameList: [],
      typeNameList: [],
      statusNameList: [
        { id: 10, name: '执行中' },
        { id: 20, name: '已归档' }
      ],
      ruleForm: {
        amount: 0,
        attachmentList: [], // 附件
        businessUnitName: '', // 业务单元名称
        chooseList: [], // 选择的合同id
        materialList: [], // 物料信息
        classifyName: '', // 业务单元名称
        typeName: '', // 合同类型名称
        partyAId: '', // 甲名称
        partyBId: '', // 乙名称
        statusName: '', // 状态名称
        //
        classifyId: '',
        typeId: '',
        code: '',
        name: '',
        projectName: '',
        partyAName: '',
        partyBName: '',
        businessUnitId: '',
        amount: '',
        signedTime: '',
        status: '',
        content: ''
      },
      rules: {
        voidReason: [
          { required: true, message: '请输入作废理由', trigger: 'blur' },
          {
            min: 0,
            max: 500,
            message: '不能超过500字符',
            trigger: 'blur'
          }
        ],
        classifyId: [
          { required: true, message: '请选择合同分类', trigger: 'change' }
        ],
        typeId: [
          { required: true, message: '请选择合同类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入合同名称', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        partyAName: [
          { required: true, message: '请输入甲方名称', trigger: 'change' }
        ],
        partyBName: [
          { required: true, message: '请输入乙方名称', trigger: 'change' }
        ],
        businessUnitId: [
          { required: true, message: '请选择业务单元', trigger: 'change' }
        ],
        signedTime: [
          { required: true, message: '请选择签约时间', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择合同状态', trigger: 'change' }
        ],
        content: [
          {
            min: 0,
            max: 500,
            message: '不能超过500字符',
            trigger: 'blur'
          }
        ],
        amount: [
          { required: true, message: '请输入合同金额', trigger: 'blur' },
          { validator: rulejs.numberMoney, trigger: 'blur' }
        ]

      },

      action: '1',
      // fileList: [],
      contractLogTable: []
    }
  },
  created() {
    this.materialTableQuery.id = this.contractTableQuery.id = this.$route.params.id
    this.getContractTableList()
    this.getMaterialTableList()
    this.queryDetail()
  },
  activated() {
    if (this.$route.query.isTag != true) {
      this.materialTableQuery.id = this.contractTableQuery.id = this.$route.params.id

      this.getContractTableList()
      this.getMaterialTableList()
      // this.queryUnitMethod()
      this.queryDetail()
    }
  },
  methods: {
    invalidChangeFileHandler(files, index) {
      this.$set(this.invalidFileList, index, files)
    },
    invalidSpliceList(i, index) {
      const invalidFileList = JSON.parse(JSON.stringify(this.invalidFileList[index]))

      invalidFileList.splice(i, 1)

      this.$set(this.invalidFileList, index, invalidFileList)

      const files = []
      for (let i = 0; i < this.invalidFileList.length; i++) {
        if (this.invalidFileList[i] !== undefined) {
          for (let j = 0; j < this.invalidFileList[i].length; j++) {
            const obj = {}
            this.invalidFileList[i][j]
            obj.fileId = this.invalidFileList[i][j].fileUrl
            obj.name = this.invalidFileList[i][j].name
            obj.size = this.invalidFileList[i][j].size
            // obj.type = this.Lists[i].nodeName
            // obj.companyId = this.editForm.id
            files.push(obj)
          }
        }
      }
      updateFile(files).then(res => {
        if (res.code == '0') {

          // this.getCustomerinfo(this.editForm.id);
        } else {
          this.$notify({
            title: '错误',
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    toRouter(val, scope) {
      if (val == 'code') {
        this.$router.push({
          name: '/contractManage/contractMag/detail',
          params: {
            id: scope.row.id,
            tagsName: scope.row.name
          }
        })
        // this.materialTableQuery.id = this.contractTableQuery.id = this.$route.params.id
        // this.getContractTableList()
        // this.getMaterialTableList()
        // this.queryDetail()
      }
    },
    complete() {
      const request = { typeFlag: 20, id: this.$route.params.id, attachmentList: [] }
      operateApi(request).then(res => {
        this.handleClosePopover()
        if (res.code == 1) {
          this.$notify({
            title: '提示',
            message: '完成成功',
            type: 'success',
            duration: 2000
          })
          this.clearCache('contractMag/detail')
          this.closeTag('/contractManage/contractMag')
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    premitChooseContract() {
      this.$refs['validRuleForm'].validate(valid => {
        if (valid) {
          this.validRuleForm.attachmentList = []
          if (this.invalidFileList.length > 0) {
            this.invalidFileList.forEach((item, index) => {
              item.forEach((item2, index3) => {
                item2.typeItemId = '001501'
                item2.typeItemName = '作废附件'
                item2.fileId = item2.fileUrl
                item2.fileName = item2.name
                this.validRuleForm.attachmentList.push(item2)
              })
            })
          }

          this.validRuleForm.id = this.$route.params.id
          operateApi(this.validRuleForm).then(res => {
            if (res.code == 1) {
              this.$notify({
                title: '提示',
                message: '作废成功',
                type: 'success',
                duration: 2000
              })
              //   this.handleClose()
              this.clearCache('contractMag/detail')
              this.closeTag('/contractManage/contractMag')
            } else {
              this.$notify({
                title: '警告',
                type: 'warning',
                message: res.msg,
                duration: '3000'
              })
            }
          })
        }
      })
    },
    handleClose(e) {
      this.invalidVisible = false
      this.$refs['validRuleForm'].resetFields()
    },
    invalid() {
      this.invalidVisible = true
    },
    deletas() {
      deleteApi({ id: this.$route.params.id }).then(res => {
        this.handleClosePopover()
        if (res.code == 1) {
          this.$notify({
            title: '提示',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.clearCache('contractMag/detail')
          this.closeTag('/contractManage/contractMag')
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    handleClosePopover() {
      document.querySelector('#app').click()
    },
    gotoEdit() {
      this.$router.push({ path: '/contractManage/contractMag/edit', query: { id: this.$route.params.id, status: encodeURIComponent(this.detail.statusName) }})
    },
    queryDetail() {
      detailApi({ id: this.$route.params.id }).then(res => {
        if (res.code == 1) {
          this.contractLogTable = res.data.contractLog
          this.detail = res.data.contract
          this.detail.bigAmount = this.numToCny(res.data.contract.amount)
          res.data.contract.amount = (Number(res.data.contract.amount).toFixed(2) + '').replace(
            /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
            '$&,'
          )
          this.detail.materialAmount ? this.detail.materialAmount = (Number(this.detail.materialAmount).toFixed(2) + '').replace(
            /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
            '$&,'
          ) : this.detail.materialAmount = 0
          if (!this.detail.classifyName || !this.detail.typeName) return
          getFileTagsApi({ classifyName: this.detail.classifyName, typeName: this.detail.typeName }).then(res2 => { // 查询Lists
            if (res2.code == 1) {
              this.Lists = res2.data || []
              this.fileList = []
              let startIndex = 0
              if (this.detail.statusName == '已作废') {
                this.Lists.push({ id: 99669, name: '作废附件' })
              }
              if (this.Lists.length > 0) {
                this.Lists.some((item, index) => {
                  res.data.attachmentList.some((item2, index2) => {
                    if (index2 > startIndex - 1) {
                      if (item.name == item2.typeItemName) {
                        this.fileList[index] == undefined ? this.fileList[index] = [] : true
                        item2.fileUrl = item2.fileId
                        item2.name = item2.fileName
                        item2.percentage = 100
                        this.fileList[index].push(item2)
                      } else {
                        startIndex = index2
                        return true
                      }
                    } else {
                      return false
                    }
                  })
                })
              }
            } else {
              this.$notify({
                title: '警告',
                type: 'warning',
                message: res2.msg,
                duration: '3000'
              })
            }
          })
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },

    numToCny(money) {
      // 汉字的数字
      var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆',
        '柒', '捌', '玖')
      // 基本单位
      var cnIntRadice = new Array('', '拾', '佰', '仟')
      // 对应整数部分扩展单位
      var cnIntUnits = new Array('', '万', '亿', '兆')
      // 对应小数部分单位
      var cnDecUnits = new Array('角', '分', '毫', '厘')
      // 整数金额时后面跟的字符
      var cnInteger = '整'
      // 整型完以后的单位
      var cnIntLast = '元'
      // 最大处理的数字
      var maxNum = 999999999999999.9999
      // 金额整数部分
      var integerNum
      // 金额小数部分
      var decimalNum
      // 输出的中文金额字符串
      var chineseStr = ''
      // 分离金额后用的数组，预定义
      var parts
      if (money == '') {
        return ''
      }
      money = parseFloat(money)
      if (money >= maxNum) {
        // 超出最大处理数字
        return ''
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger
        return chineseStr
      }
      // 转换为字符串
      money = money.toString()
      if (money.indexOf('.') == -1) {
        integerNum = money
        decimalNum = ''
      } else {
        parts = money.split('.')
        integerNum = parts[0]
        decimalNum = parts[1].substr(0, 4)
      }
      // 获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0
        var IntLen = integerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1)
          var p = IntLen - i - 1
          var q = p / 4
          var m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            // 归零
            zeroCount = 0
            chineseStr += cnNums[parseInt(n)] +
										cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q]
          }
        }
        chineseStr += cnIntLast
      }
      // 小数部分
      if (decimalNum != '') {
        var decLen = decimalNum.length
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1)
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger
      } else if (decimalNum == '') {
        chineseStr += cnInteger
      }
      return chineseStr
    },
    selectClassifyName() {
      this.ruleForm.typeId = ''
    },
    queryUnitMethod() {
      queryUnit().then(res => {
        if (res.code == 1) {
          this.unitList = res.data
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },

    getContractTableList() {
      const request = Object.assign({}, request, this.contractTableQuery)
      request.id = this.$route.params.id
      selectContractTableApi(request).then(res => {
        if (res.code == 1) {
          this.contractTable = res.data.records
          this.contractTableQuery.total = res.data.total
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    getMaterialTableList() {
      const request = Object.assign({}, request, this.materialTableQuery)
      request.id = this.$route.params.id
      selectMaterialTableApi(request).then(res => {
        if (res.code == 1) {
          this.materielTable.data = res.data.records
          this.materialTableQuery.total = res.data.total
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg
          })
        }
      })
    },
    handleSizeChange(val) {
      this.contractTableQuery.pageSize = val
      this.contractTableQuery.page = 1
      this.getContractTableList()
    },
    handleCurrentChange(val) {
      this.contractTableQuery.page = val
      this.getContractTableList()
    },
    handleSizeChange2(val) {
      this.materialTableQuery.pageSize = val
      this.materialTableQuery.page = 1
      this.getMaterialTableList()
    },
    handleCurrentChange2(val) {
      this.materialTableQuery.page = val
      this.getMaterialTableList()
    },

    headerCellClass({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      if (column.type === 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type === 'selection') {
        return ''
      } else {
        return 'samples-header-cell'
      }
    },

    querySearch(queryString, cb) {
      let fa
      var query = {
        page: 1,
        pageSize: 100,
        name: queryString
      }
      this.restaurants2 = []
      searchNameApi(query).then(response => {
        fa = response.data.records
        for (const item of fa) {
          this.restaurants2.push({
            value: item.name,
            id: item.id
          })
        }
        var restaurants2 = this.restaurants2
        var results = queryString
          ? restaurants2.filter(this.createFilter(queryString))
          : restaurants2
        cb(results)
      })
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !=
          -1
        )
      }
    },
    querySearchTwo(queryString, cb) {
      let fa
      var query = {
        page: 1,
        pageSize: 100,
        name: queryString
      }
      this.restaurants2 = []
      searchNameApi(query).then(response => {
        fa = response.data.records
        for (const item of fa) {
          this.restaurants2.push({
            value: item.name,
            id: item.id
          })
        }
        var restaurants2 = this.restaurants2
        var results = queryString
          ? restaurants2.filter(this.createFilter(queryString))
          : restaurants2
        cb(results)
      })
    },
    cancel() {

    }

  }
}
</script>
<style lang='scss' scoped>
.projectOneTitle{
  margin-bottom: 20px;
}
.totalPriceRow{
color: #606266;
    font-size: 14px;
    text-align: right;
    margin-top: 12px;
}
.contract-content{
    color: #333;

    span{
            display: inline-block;
        width: 80%;
        border: 1px solid #ccc;
        min-height: 100px;
        border-radius: 6px;
        padding: 5px 10px;
        line-height: 20px;
        // margin-top: 10px;
    }
}

</style>
<style lang='scss'>

.contractMag-lable{

  flex: 0 0 1200px !important;
}
.artical-footer{
    display: flex;
    justify-content: flex-end;
    color: #606266;
    font-size: 14px;
    .footer-pie{
            margin-left: 25px;
            display: flex;
        div:first-child{
            width:56px;
            flex: none;
        }
    }
    .footer-pie:nth-child(even){
        div:first-child{
           width:70px;
        }
    }
}
.contract-materiel .el-table__row{
     td div{
        line-height: 28px !important;
        height: 28px !important;
     }
    .el-input--medium .el-input__inner {
        height: 28px !important;
        line-height: 28px !important;
    }
    .el-input--small .el-input__inner{
        height: 28px !important;
        line-height: 28px !important;
    }

}
.contract-materiel{
  .materielTable-input .el-input__suffix{
      top: -3px;
  }
    .cell{
        overflow: visible !important;
    }
    .el-table__body-wrapper{
        overflow: visible !important;
    }
    .sample-error-message{
        top: -34px;
    }
    .sample-error-message::before{
            top: 28px
    }

}
</style>

